<template>
    <div style="margin-left: 250px;margin-top: -500px;">
        <el-button>新增</el-button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="danger">批量删除</el-button>
        <div>
            <el-table :data="tableData" style="width: 920px;height: 450px;">
                <el-table-column type="selection" width="45" />
                <el-table-column type="index" label="序号" />
                <el-table-column prop="shopName" label="商品名称" />
                <el-table-column property="shopProductionBatches" label="生产批次" show-overflow-tooltip />
                <el-table-column property="shopLefeTime" label="保质期(天)" />
                <el-table-column property="shopProductionLisenceNum" label="生产许可证号" />
                <el-table-column property="shopProductionCompany" label="生产企业" />
                <el-table-column label="信息完整度" />
                <el-table-column property="addPerson" label="创建人" />
                <el-table-column property="addTime" label="创建时间" />
                <el-table-column property="updatePerson" label="修改人" />
                <el-table-column fixed="right" property="address" label="操作">
                    <template #default="scoped">
                        <span>查看详情</span>
                        <span>删除</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script setup lang="ts">
import axios from 'axios'
import { ElTable } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'

const pageData = reactive(
    {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
    }
)

const tableData = ref([])

const showTable = () => {
    axios.get("http://localhost:5244/api/TraceabilityManagementRead/QueryShop/QueryShopAsync", {
        params: {
            pageIndex: pageData.pageIndex,
            pageSize: pageData.pageSize
        }
    })
        .then(res => {
            console.log(res)
            tableData.value = res.data.data
        })
}

onMounted(() => {
    showTable();
})
</script>